/* color palette from <https://github.com/vuejs/theme> */
:root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: #f8f8f8;
  --vt-c-white-mute: #f2f2f2;

  --vt-c-black: #181818;
  --vt-c-black-soft: #222222;
  --vt-c-black-mute: #282828;

  --vt-c-indigo: #2c3e50;

  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

  --vt-c-text-light-1: var(--vt-c-indigo);
  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
  --vt-c-text-dark-1: var(--vt-c-white);
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}

/* semantic color variables for this project */
.theme-light {
  --color-background: #f3f4f6; /* Neutral light gray */
  --color-background-soft: #e5e7eb; /* Slightly deeper gray for panels */
  --color-background-mute: #e0e1e3; /* Muted sections */

  --color-border: #d1d5db;
  --color-border-hover: #94a3b8;

  --color-heading: #1a233b;
  --color-text: #232946;
  --color-text-secondary: #6b7280;

  --section-gap: 10rem;

  --card-background: #f8fafc; /* Off-white for cards */
  --card-background-hover: #eceef1;
  --card-text-color: #232946;
  --card-border-color: #d1d5db;
  --card-shadow: 0 2px 12px 0 rgba(44, 62, 80, 0.06);

  /* Deep teal accent for buttons/links */
  --button-background-color: #176b87;
  --button-hover-color: #155e75;
  --button-active-color: #0f3a4a;
  --button-outline-text-color: #176b87;
  --button-outline-hover-text-color: #176b87; /* Use accent color, not white */
  --button-outline-background: #e1e4ea;
  --button-disabled-background-color: #eceef1;
  --button-disabled-text-color: #a3aed6;

  --input-background: #f7f8fa;
  --input-border: #d1d5db;
  --input-border-focus: #176b87;
  --input-text: #232946;

  --link-color: #176b87;
  --link-hover-color: #155e75;

  --scrollbar-thumb: #d1d5db;
  --scrollbar-track: #f3f4f6;

  /* Primary & Secondary Colors */
  --color-primary: #3a8ee6;
  --color-primary-soft: rgba(58, 142, 230, 0.15);
  --color-primary-hover: #2c7be5;

  --color-secondary: #6c757d;
  --color-secondary-soft: rgba(108, 117, 125, 0.15);
  --color-secondary-hover: #5a6268;

  /* Success colors - green tones */
  --color-success: #2ecc71;
  --color-success-soft: rgba(46, 204, 113, 0.15);
  --color-success-hover: #27ae60;

  /* Error colors - red tones */
  --color-error: #e74c3c;
  --color-error-soft: rgba(231, 76, 60, 0.15);
  --color-error-hover: #c0392b;

  /* Warning colors - yellow/orange tones */
  --color-warning: #f39c12;
  --color-warning-soft: rgba(243, 156, 18, 0.15);
  --color-warning-hover: #e67e22;
}

.theme-dark {
  --color-background: #181a20;
  --color-background-soft: #232b3a;
  --color-background-mute: #232b3a;

  --color-border: #374151;
  --color-border-hover: #8ca6d5;

  --color-heading: #e5e7eb;
  --color-text: #bfc8d6;
  --color-text-secondary: #7f8ea3;

  --section-gap: 160px;

  --card-background: transparent;
  --card-background-hover: rgba(44, 62, 80, 0.15);
  --card-text-color: #bfc8d6;
  --card-border-color: #8ca6d5;

  --button-background-color: #32577f;
  --button-hover-color: #4c83be;
  --button-active-color: #223a5e;
  --button-outline-text-color: #8ca6d5;
  --button-outline-hover-text-color: #fff;
  --button-outline-background: rgba(44, 62, 80, 0.15);
  --button-disabled-background-color: #374151;
  --button-disabled-text-color: #6b7280;

  --input-background: #232b3a;
  --input-border: #374151;
  --input-border-focus: #4c83be;
  --input-text: #bfc8d6;

  --link-color: #8ca6d5;
  --link-hover-color: #bfc8d6;

  --scrollbar-thumb: #374151;
  --scrollbar-track: #232b3a;

  /* Primary & Secondary Colors */
  --color-primary: #4d96f0;
  --color-primary-soft: rgba(77, 150, 240, 0.2);
  --color-primary-hover: #3a8ee6;

  --color-secondary: #adb5bd;
  --color-secondary-soft: rgba(173, 181, 189, 0.2);
  --color-secondary-hover: #98a2ac;

  /* Success colors - adjusted for dark mode */
  --color-success: #4cd137;
  --color-success-soft: rgba(76, 209, 55, 0.2);
  --color-success-hover: #44bd32;

  /* Error colors - adjusted for dark mode */
  --color-error: #ff6b6b;
  --color-error-soft: rgba(255, 107, 107, 0.2);
  --color-error-hover: #ee5253;

  /* Warning colors - adjusted for dark mode */
  --color-warning: #ffa502;
  --color-warning-soft: rgba(255, 165, 2, 0.2);
  --color-warning-hover: #ff9f1a;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

body {
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background);
  transition:
    color 0.5s,
    background-color 0.5s;
  line-height: 1.6;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body,
#app {
  height: 100%;
  width: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--color-border) var(--color-background);
}
